feat(auth): add progressive authentication prompts (Phase 2)#267
Merged
feat(auth): add progressive authentication prompts (Phase 2)#267
Conversation
Implements progressive prompts to encourage anonymous users to sign in, based on their usage patterns. Part of the auth flow revamp initiative. Key features: - UsageTracker: Tracks transcription count and prompt interactions - AuthPromptController: Determines when to show prompts based on thresholds - Toast at 5 transcriptions - Soft modal at 10 transcriptions - Full modal with value proposition at 20 transcriptions - AuthPromptUI: Toast and modal components with sign-in buttons - Exponential backoff after dismissals (5min base, caps at 24h) - Stops prompting after 5 dismissals - Respects authentication state (no prompts for signed-in users) UI features: - Dark mode support - Mobile responsive - Accessibility (ARIA labels, focus trapping, reduced motion) - Smooth animations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
The auth toast was overlapping with the VAD status indicator since both were positioned in the bottom-right corner. Move the toast up to bottom: 100px to stack it above the VAD indicator (at bottom: 20px). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
- Replace anonymous user icon with SayPi bubble logo for brand recognition - Add "Say, Pi" branding header to distinguish from host sites - Track conversation turns/dictation completions instead of transcription requests (fixes prompts appearing too soon) - Update benefit messages to reflect actual features: - Higher usage limits with free account - Text-to-speech voices (paid plans) - Premium features & chatbot support - Add migration logic for existing usage stats 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
When clicking the SayPi settings button multiple times, the extension was opening a new popup window each time. Now it checks for an existing settings window/tab and focuses it instead of creating duplicates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Exposes window.saypiResetAuthPrompts() for testing auth prompts. Run in console, then reload page to start fresh. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Removed CSS filter that was making the entire SVG white, which hid the "Pi" character. Now shows white bubble with black "Pi" on green background - the proper SayPi branding. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
Added padding-right to content container to ensure space for the absolutely-positioned close button, preventing overlap with the Sign In button. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
10 seconds wasn't enough time to read the toast message. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements progressive authentication prompts to gently encourage anonymous users to sign in based on their usage patterns. This is Phase 2 of the auth flow revamp initiative.
New Components
UsageTrackerAuthPromptControllerAuthPromptUIProgressive Thresholds
Note: Interactions = conversation turns with chatbot + dictation completions (not raw transcription requests)
Toast
Soft Modal
Hard Modal
Smart Cooldowns
User Experience
Branding & Messaging
Styling
Additional Fixes
saypiResetAuthPrompts()available in console for testingFiles Changed
New files:
src/auth/UsageTracker.ts- Usage tracking singletonsrc/auth/AuthPromptController.ts- Prompt timing logicsrc/auth/AuthPromptUI.ts- Toast and modal componentssrc/styles/auth-prompt.scss- Prompt stylingtest/auth/UsageTracker.spec.ts- 5 teststest/auth/AuthPromptController.spec.ts- 15 testsModified files:
src/saypi.index.js- Initialize auth prompt system, expose debug helpersrc/svc/background.ts- Reuse existing settings window_locales/en/messages.json- 8 new i18n messagesTest plan
🤖 Generated with Claude Code